<template>
  <div class="search_id">
    <div class="title"><span>人事看板</span></div>
    <div style="padding: 20px 20px 0 20px;overflow:auto">
    <!-- <div> -->
      <el-row >
        <el-col :span="12" class="tu">
          <el-card class="box-card" style="height:320px;">
            <div class="text item">
              <div
                id="manuChart"
                :style="{ width: '100%', height: '300px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="pie1">
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="main1" style="float:left;width:100%;height: 300px"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="tu">
          <el-card class="box-card">
            <div slot="header" class="clearfix" >
              <span><h2>部门人数</h2></span>
            </div>
            <div class="text item">
              <div
                ref="chart"
                :style="{ width: '100%', height: '300px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="tu">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h2>离职人数</h2></span>
            </div>
            <div class="text item">
              <div
                ref="chart1"
                :style="{ width: '100%', height: '300px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
        
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入基本模板
let Echarts = require("echarts"); //require("echarts/lib/echarts");
require("echarts/lib/chart/bar"); // 引入柱状图组件
require("echarts/lib/chart/line");
require('echarts/lib/chart/pie');// 引入饼状图组件
// 引入提示框和title组件
require("echarts/lib/component/tooltip"); // tooltip组件
require("echarts/lib/component/title"); //  title组件
require("echarts/lib/component/legend"); // legend组件

export default {
  name: "broad",
  data() {
    return {
      chart: null,//部门人数看板
      data:[8, 10, 4, 12],
      chart1: null,//离职人数看板
    };
  },
  created(){
    //页面打开就执
    this.leaveKanban();//离职看板
      const date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        myDate = date.getDate();
      (this.today = `${year}/${month < 10 ? "0" + month : month}/${
        myDate < 10 ? "0" + myDate : myDate
      }`),
      console.log(date);
      this.leaveKanban(this.today); //刷新离职看板
      this.initSetTimeout(this.today); //调用每隔10秒刷新数据
  },
  mounted() {
    this.init();//部门人数【柱形图】
    this.leaveKanban();//离职看板【折线图】
    this.initData();//工龄看板【饼状图】
    this.createdManuChart();//员工年龄【水平柱状图】
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
    window.addEventListener("resize", () => {
      this.chart1.resize();
    });
  },
  methods: {
    //定时刷新
    initSetTimeout(today) {
      setInterval(() => {
        this.leaveKanban(today);//离职看那
        console.log("已刷新");
      }, 10000);
    },
    //部门人数看板【垂直柱状图】
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        xAxis: {
          type: "category",
          data: ["财务部","人事部","市场部","运营组",],
          name: "部门", // x轴名称
          // x轴名称样式
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        }, //X轴
        yAxis: { 
          type: "value" ,
          name: "部门人数", // y轴名称
            // y轴名称样式
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18,
            },
        }, //Y轴
        tooltip: {
          trigger: "item", // axis   item   none三个值
        },
        series: [{ data: this.data, type: "bar" }], //配置项
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
    //离职人数看板【折线图】
    leaveKanban(){
      this.axios.get("KanbanAPI/GetLeaveKanban").then((res) => {
          console.log(res.data.body);
          //2.初始化
          this.chart1 = Echarts.init(this.$refs.chart1);
          //3.配置数据
          let option1 = {
          xAxis: {
              type: "category",
              data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],
              name: "月份", // x轴名称
              // x轴名称样式
              nameTextStyle: {
                fontWeight: 600,
                fontSize: 18,
              },
            }, //X轴
          yAxis: { 
            type: "value" ,
            name: "离职人数", // y轴名称
            // y轴名称样式
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18,
            },
          }, //Y轴
          tooltip: {
            trigger: "axis", // axis   item   none三个值
          },
          series: [
              { 
                name: "离职人数",
                data: res.data.body,
                type: "line"
              },
            ], //配置项
          };
          // 4.传入数据
          this.chart1.setOption(option1);
        });
    },
    //工龄比【饼状图】
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
          title : {
              text: '工龄比',//主标题
              //subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: ['1~3年','4-6年','7-9年','10年以上']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:1548, name:'1~3年'},
                      {value:310, name:'4-6年'},
                      {value:234, name:'7-9年'},
                      {value:335, name:'10年以上'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
    //员工年龄【水平柱形图】
    createdManuChart() {
       let manuChart = Echarts.init(document.getElementById('manuChart'));
       let  option = {
        title : {
          text: '员工年龄',//主标题
          //subtext: '纯属虚构',//副标题
          x:'center',//x轴方向对齐方式
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: 'value',
          min: 0,
          max:100,
          axisLabel : {
            show : false
          },
          splitLine : {
            show : false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick : {
            show : false
          },
          axisLine:{
            show : false
          },
          data: ["18-24岁","25-29岁","30-39岁","40-49岁","50岁以上",]
        },
        series: [{
          type: 'bar',
          barWidth:20,
          data: [40,20,27,10,3],
          label: {
            show: true,
            formatter: '{c}%', //显示数据带上百分比
            position: 'right'
          },
          itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = ['#5470c6', '#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc',];
                                var index=params.dataIndex%colorList.length;
                                return colorList[index]
                            }
                        }
                    },
        }],
        // grid: {
        //   x: '10%',
        //   y: 0,
        //   x2: '10%',
        //   y2: 0
        // },
        // dataZoom: {
        //   yAxisIndex: [0],
        //   type:'inside',
        //   start: 0,
        //   end: 30,
        //   zoomLock:true,
        // }
      };
      manuChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
}
.title span {
  float: left;
  padding-top: 15px;
  color: #999999;
  margin-left: -80px;
}
</style>